<template>
    <view class="system-page">
        <view class="system-nav">
            <uni-nav-bar 
                left-icon="" 
                title="扫码结果"
                color="#fff"
                backgroundColor="transparent"
                :statusBar="true"
                :border="false"
            ></uni-nav-bar>
        </view>
        <view class="system-contain">
            <view class="system-header">
                <view class="title-num">第{{num}}次扫码</view>
                <view class="title-code">任务单编号:</view>
                <view class="title-value">{{form['tsakCode']}}</view>
                <view class="title-result">
                    <view class="title-result-bg"></view>
                    <text>扫描成功</text>
                </view>
                <view class="title-prompt">{{dateTimer}}秒后进入列表…</view>
            </view>
        </view>
    </view>
</template>

<script>
// 样品单条查询
import { sampleQueryById, updateSampleNum } from '@/service/sample';

export default {
    name: 'ScanCodePromptPage',
    props: {
        row: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        row: {
            handler(query) {
                // 开始总录制时间
                let time = this.$Moment().format('YYYY-MM-DD HH:mm:ss')
                this.$store.commit('SET_START_RECORD_TIME', time)
                // 开始录制时间
                this.$store.commit('SET_SAMPLE_SCAN_CODE_START_TIME', time)
                // 调用接口
                sampleQueryById(query['sampleId']).then(res => {
                    // 赋值
                    this.form = res['data'];
                    // 增加次数
                    updateSampleNum(query['sampleId']);
                    // 存储扫码数据
                    let list = this.$store.state.sampleScanCodeList;
                    list = [...list, {
                        sampleId: query['sampleId'],
                        tsakCode: this.form['tsakCode'],
                        // startTime: this.$store.state.sampleScanCodeStartTime,
                        startTime: time,
                        endTime: '',
                        status: '录制中'
                    }]
                    this.$store.commit('SET_SAMPLE_SCAN_CODE_LIST', list);
                    // 设置数量
                    this.num = list.length;
                    // 倒计时
                    this.setIntervalTimer = setInterval(()=>{
                        this.dateTimer--;
                    }, 1000)
                    this.setTimeoutTimer = setTimeout(() => {
                        let url = `/pages/scanCodeResultList/index`;
                        this.$Router.redirect(url);
                    }, 5000)
                });
                
            },
            deep: true // 使用深度监听
        }
    },
    data() {
        return {
            num: 1,
            dateTimer: 5,
            form: {}
        }
    },
    beforeDestroy() {
        this.setIntervalTimer && clearInterval(this.setIntervalTimer)
        this.setTimeoutTimer && clearTimeout(this.setTimeoutTimer)
    },
    methods: {
       
    }
}
</script>

<style lang="scss" scoped>
.system-page {
    height: 100%;
    background-color: #F5F5F5;
    .system-nav {
        height: 350rpx;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url($uni-image-ip+'/clude-nav.png');
    }
    .system-contain {
        display: flex;
        justify-content: center;
        margin-top: -100rpx;
        .system-header {
            border-radius: 20rpx;
            background-color: #ffffff;
            width: 678rpx;
            min-height: 900rpx;
            box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(44, 51, 44, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #1D2129;
            .title-num {
                padding-top: 100rpx;
                font-size: 40rpx;
                font-weight: 600;
            }
            .title-code {
                padding-top: 72rpx;
                color: #7D7D7D;
                font-size: 28rpx;
            }
            .title-value {
                padding-top: 20rpx;
                color: #7D7D7D;
                font-size: 36rpx;
            }
            .title-result {
                padding-top: 70rpx;
                font-size: 34rpx;
                display: flex;
                align-items: center;
                .title-result-bg {
                    width: 42rpx;
                    height: 42rpx;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    background-image: url($uni-image-ip+'/result.png');
                    margin-right: 28rpx;
                }
            }
            .title-prompt {
                padding-top: 110rpx;
                color: #7D7D7D;
                font-size: 24rpx;
            }
        }
    }
}
</style>